<template>
	<view>
		<u-navbar title="客戶類型管理" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="khlxshow=true">添加</view>
		</u-navbar>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff radius dingwei" v-for="item in list.data" :key="item.id"
				@click="checkItem(item)">
				<view class="checkfocus" v-if="item.ischeck && !item.disabled">
					<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
				</view>
				<view class="checkfocus" style="background-color: #999;" v-if="item.ischeck && item.disabled">
					<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
				</view>
				<view class="titletext bold hei_text white_nowrap">{{item.name}}人數<text
						class="xiaohuang margin-left">${{item.price}}</text></view>
				<view class="flexbetween margin_top">
					<view class="xiaohuang">排序：{{item.weigh}}</view>
					<view class="flexright">
						<view class="flexleft margin_right"
							@click.stop="edititem(item)">
							<u-icon name="edit-pen" color="#999" size="16"></u-icon>
							<view class="xiaohei">編輯</view>
						</view>
						<view class="flexleft" @click.stop="remove(item.id)">
							<u-icon name="trash" color="#999" size="16"></u-icon>
							<view class="xiaohei">刪除</view>
						</view>
					</view>
				</view>
				

			</view>
		</view>
		<u-modal :show="show" showCancelButton confirmColor="#ffb800" @cancel="show=false" @confirm="confirm"
			confirmText="確認" cancelText="取消">
			<view class="slot-content color_ling text_weight text">
				您確定要刪除當前客戶類型嗎？
			</view>
		</u-modal>
		<view class="posibottom mainpadding" v-if="type==1">
			<view class="submitbtn" @click="submit">確定</view>
		</view>
		<u-modal :show="khlxshow" title="客戶類型" confirmText="確認" @confirm="chongzhi" cancelText="取消"
			@cancel="chongzhicancel" showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">客戶類型名稱：</view>
					<input type="text" class="textright" placeholder="請输入" v-model="name">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">金額：</view>
					<input type="text" class="textright" placeholder="請输入" v-model="price">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">排序：</view>
					<input type="number" class="textright" placeholder="請输入" v-model="weigh">
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				id: "",
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				type: 0, //1商品編輯進入的這個頁面，2添加計時客戶信息進入的這個頁面
				cdbtc_ids: [],
				khlxshow: false,
				weigh: "",
				name: "",
				price:""
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (options.cdbtc_ids) {
				this.cdbtc_ids = options.cdbtc_ids.split(',')
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			chongzhi() {
				if(this.name==""){
					httpRequest.toast("請輸入客戶類型名稱");
					return false
				}
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					name: this.name,
					weigh: this.weigh,
					price:this.price
				}
				let url = "/api/cdb/addCdbKhsf"
				if (this.id) {
					url = "/api/cdb/editCdbjhsf"
					this.$set(data, "id", this.id)
				}
				this.id = ""
				this.name = ""
				this.weigh = ""
				this.price = ""
				this.khlxshow = false
				httpRequest.request(url, 'GET', data).then(res => {
					httpRequest.toast(res.msg);
					if(res.code==1){
						this.init()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			edititem(item){
				this.id = item.id
				this.name = item.name
				this.weigh = item.weigh
				this.price = item.price
				this.khlxshow = true
			},
			chongzhicancel() {
				this.id = ""
				this.name = ""
				this.weigh = ""
				this.price = ""
				this.khlxshow = false
			},
			submit() {
				let arr = []
				this.list.data.forEach(item => {
					if (item.ischeck && !item.disabled) {
						arr.push(item)
					}
				})
				uni.$emit("checkcdbkhlx", arr)
				uni.navigateBack(1)
			},
			checkItem(item) {
				if(item.disabled){
					return false
				}
				if (this.type == 1) {
					item.ischeck = !item.ischeck
				}
			},
			init() {
				let _this = this
				httpRequest.request('/api/cdb/cdbjhsfIndex', 'GET', {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					if (res.code == 1) {
						if (this.type == 1) {
							res.data.forEach(item => {
								this.$set(item, "ischeck", false)
								this.$set(item, "disabled", false)
								this.cdbtc_ids.forEach(current => {
									if (current == item.id) {
										item.ischeck = true
										item.disabled = true
									}
								})
							})
						}
						_this.list.data = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			async confirm() {
				let _this = this
				let res = await this.http.request('/api/cdb/delCdbjhsf', 'POST', {
					id: this.id
				})
				this.http.toast(res.msg)
				if (res.code == 1) {
					let index = this.list.data.findIndex(item => {
						return this.id == item.id
					})
					this.list.data.splice(index, 1)
				}
				this.show = false
			},
			remove(id) {
				this.id = id
				this.show = true
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			jumpurldetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
		}
	}
</script>

<style>

</style>